<template>
  <div class="home-container">
    <div class="aside-wrap" :class="{ 'aside-hide': !aside }" :style="asideStyle">
      <div class="aside-inner" :style="asideStyle">
        <div class="top-title">
          <b-icon name="thunderbolt"></b-icon>
          <span>Cesium-Demo</span>
        </div>

        <Menus></Menus>
      </div>

      <span class="toggle-arrow" @click="toggleAside">
        <b-icon :name="aside ? 'caret-left' : 'caret-right'"></b-icon>
      </span>
    </div>
    <div class="layout-wrap" :style="layoutStyle">
      <div class="main-wrap p20">
        <router-view v-slot="{ Component, route }">
          <transition name="fade-transverse" mode="out-in">
            <component :is="Component" :key="route.path"></component>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Menus from './menu/menus.vue'

const aside = ref(true)
const asideStyle = computed(() => ({ width: aside.value ? '292px' : 0 }))
const layoutStyle = computed(() => ({ paddingLeft: aside.value ? '292px' : null }))

function toggleAside() {
  aside.value = !aside.value
}
</script>
